<template>
  <div class="advancedQuery">
    <splitpanes class="default-theme">
      <pane min-size="15" size="25">
        <div class="leftNavS">
          <div class="title">指标</div>
          <!-- 左侧导航 -->
          <el-row class="tac" style="overflow: auto;height:44.875rem;">
            <el-col :span="24">
              <el-menu
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                @select="selectActive"
                :unique-opened="true"
                style="border:none"
                active-text-color="#303133"
              >
                <!-- 最外层 -->
                <el-submenu
                  :index="''+index1"
                  v-for="(item1,index1) in leftCateData"
                  :key="index1"
                  :style="{'background-color':$store.state.selectDataLeft.id===item1.id?'#95CEE4':''}"
                >
                  <template slot="title">{{item1.name}}</template>
                  <!-- 第一层 -->
                  <template v-for="(item2,index2) in item1.children">
                    <el-submenu
                      :index="''+index1+'-'+index2"
                      :key="index2"
                      v-if="item2.children!==undefined"
                      :style="{'background-color':$store.state.selectDataLeft.id===item2.id?'#95CEE4':''}"
                    >
                      <template slot="title">{{item2.name}}</template>
                      <!-- 第二层 -->
                      <template v-for="(item3,index3) in item2.children">
                        <el-submenu
                          :index="''+index1+'-'+index2+'-'+index3"
                          :key="index3"
                          v-if="item3.children!==undefined"
                          :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                        >
                          <template slot="title">{{item3.name}}</template>
                          <!-- 第三层 -->
                          <template v-for="(item4,index4) in item3.children">
                            <el-submenu
                              :index="index1+'-'+index2+'-'+index3+'-'+index4"
                              :key="index4"
                              v-if="item4.children!==undefined"
                              :style="{'background-color':$store.state.selectDataLeft.id===item4.id?'#95CEE4':''}"
                            >
                              <template slot="title">{{item4.name}}</template>
                              <!-- 第四层 -->
                              <template v-for="(item5,index5) in item4.children">
                                <el-submenu
                                  :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
                                  :key="index5"
                                  v-if="item5.children!==undefined"
                                  :style="{'background-color':$store.state.selectDataLeft.id===item5.id?'#95CEE4':''}"
                                >
                                  <template slot="title">{{item5.name}}</template>
                                  <!-- 待定添加 -->
                                  <!-- 待定添加 -->
                                </el-submenu>
                                <el-menu-item
                                  :index="index1+'-'+index2+'-'+index3+'-'+index4+'-'+index5"
                                  :key="index5"
                                  v-if="item5.children===undefined"
                                  :style="{'background-color':$store.state.selectDataLeft.id===item5.id?'#95CEE4':''}"
                                >{{item5.name}}</el-menu-item>
                              </template>
                            </el-submenu>
                            <el-menu-item
                              :index="index1+'-'+index2+'-'+index3+'-'+index4"
                              :key="index4"
                              v-if="item4.children===undefined"
                              :style="{'background-color':$store.state.selectDataLeft.id===item4.id?'#95CEE4':''}"
                            >{{item4.name}}</el-menu-item>
                          </template>
                        </el-submenu>
                        <el-menu-item
                          :index="''+index1+'-'+index2+'-'+index3"
                          :key="index3"
                          v-if="item3.children===undefined"
                          :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                        >{{item3.name}}</el-menu-item>
                      </template>
                    </el-submenu>
                    <el-menu-item
                      :index="''+index1+'-'+index2"
                      v-if="item2.children===undefined"
                      :key="index2"
                      :style="{'background-color':$store.state.selectDataLeft.id===item2.id?'#95CEE4':''}"
                    >{{item2.name}}</el-menu-item>
                  </template>
                </el-submenu>
                <!-- <template v-if="item2.children===undefined">
                        <el-menu-item
                          :index="index1+'-'+index2+'-'+index3"
                          v-for="(item3,index3) in item2.children"
                          :key="index3"
                          :style="{'background-color':$store.state.selectDataLeft.id===item3.id?'#95CEE4':''}"
                        >{{item3.name}}</el-menu-item>
                </template>-->
              </el-menu>
            </el-col>
          </el-row>
        </div>
      </pane>
      <pane min-size="48" size="47.5">
        <div class="centerNavs">
          <div class="title">
            <input type="text" placeholder="请输入你要查询的指标" v-model="labelNameSDFD" />
            <div @click="searchArealy()">查询</div>
            <input type="checkbox" v-model="checkboxState" />
            <span>从结果中筛选 共{{searchDatas.length}}条</span>
          </div>
          <div class="titleContSelect">
            <span @click="clickStateOption('checkAll')">全选</span>
            <span @click="clickStateOption('inverse')">反选</span>
            <span @click="clickStateOption('empty')">清空</span>
            <font>提示：最多选择100条数据进行查询！</font>
          </div>
          <div class="centerContent" style="overflow: auto;">
            <div v-for="(item,index) in searchDatas" :key="index">
              <input
                type="checkbox"
                v-model="item.inputState"
                @change="clickStateOption('oneClick',index,'left')"
                :ref="'input'+index"
              />
              <img :src="zhibiaoImg" alt @click="explainSd(item.desc)" />
              <span>{{item.nameText}}</span>
            </div>
          </div>
        </div>
      </pane>
      <pane min-size="25" size="27.5">
        <div class="rightNavs">
          <div class="title">指标({{changeActiveDataS}}/100)</div>
          <div class="titleContSelect">
            <span @click="clickStateOption('clearAll')">全部清除</span>
            <span @click="clickStateOption('clearUnselected')">清除未选项</span>
          </div>
          <div class="centerContent" style="overflow: auto;">
            <div v-for="(item,index) in changeActive" :key="index">
              <input
                type="checkbox"
                v-model="item.inputState"
                @change="clickStateOption('oneClick',index,'right')"
                :ref="'input'+index"
              />
              <img :src="zhibiaoImg" alt @click="explainSd(item.desc)" />
              <span>{{item.nameText}}</span>
            </div>
          </div>
        </div>
      </pane>
    </splitpanes>
    <!-- 指标解释 -->
    <LabelExplain v-if="$store.state.labelExplainState"></LabelExplain>
  </div>
</template>
<script>
// 引入窗口拆分组件
import { Splitpanes, Pane } from 'splitpanes'
import 'splitpanes/dist/splitpanes.css'
// 指标解释
import LabelExplain from '@/components/labelExplain/LabelExplain.vue'
export default {
  name: 'advancedQuery',
  components: {
    Splitpanes,
    Pane,
    LabelExplain: LabelExplain
  },
  data () {
    return {
      // 默认展开
      defaultOpenDataCode: null,
      zhibiaoImg: require('../../../static/chatCont/zhibiaojieshi.png'),
      leftCateData: null,
      checkboxState: false,
      // 查询到的数据
      searchDatas: [
        // {
        //   // input选中状态
        //   inputState: false,
        //   // 指标解释显示状态
        //   zbjsState: false,
        //   // 指标名称
        //   nameText: '国内生产总值_当季值'
        // },
        // {
        //   // input选中状态
        //   inputState: false,
        //   // 指标解释显示状态
        //   zbjsState: false,
        //   // 指标名称
        //   nameText: '信息传输、软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值软件和信息技术服务业增加值_当季值'
        // },
        // {
        //   // input选中状态
        //   inputState: false,
        //   // 指标解释显示状态
        //   zbjsState: false,
        //   // 指标名称
        //   nameText: '租赁和商务服务业增加值_累计值'
        // },
        // {
        //   // input选中状态
        //   inputState: false,
        //   // 指标解释显示状态
        //   zbjsState: false,
        //   // 指标名称
        //   nameText: '租赁和商务服务业增加值_累计值545'
        // }
      ],
      // 选中的指标(右侧)
      changeActive: [],
      // 右侧打钩总数
      rightGoCount: 0,
      // 选中的指标展开分类id
      selectClassId: null,
      // 查询的指标
      labelNameSDFD: ''
    }
  },
  // 监听对象变化
  watch: {
    changeActive: {
      handler: function (data) {
        this.valueSearches()
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath, '开444')
      console.log(key.split('-'))
      let datart = []
      key.split('-').forEach((item, index) => {
        if (index === 0) {
          datart = this.leftCateData[item]
        } else {
          datart = datart.children[item]
        }
      })
      console.log(datart.id, 1010111)
      this.selectClassId = datart.id
      this.$store.state.selectDataLeft = datart
      this.searchArealy()
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    selectActive (key, keyPath) {
      console.log(key, keyPath)
      this.showColoect(key)
    },
    // 全选、反选、清空、全部清除、清除未选项
    clickStateOption (state, ind, statefr) {
      switch (state) {
        case 'checkAll':// 全选
          console.log(this.searchDatas, 'this.searchDatas')
          // 计算剩余指标空间
          let computedKj = 100
          if (this.changeActive.length > 0) {
            computedKj = computedKj - this.changeActive.filter((item, index) => {
              return item.inputState === true
            }).length
          }
          console.log(computedKj, 'computedKj')
          this.searchDatas.forEach((item, index) => {
            /* eslint-disable */
            console.log(index)
            if (index < computedKj) {
              item.inputState = true
              this.changeActive.push(item)
            } else {
              item.inputState = false
            }
          })
          break
        case 'inverse':// 反选
          let numSd = []
          this.searchDatas.forEach((item, index) => {
            /* eslint-disable */
            this.rightGoCount < 100 ? (item.inputState = !item.inputState, this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined ? this.changeActive.push(item) : 1) : (item.inputState = false)
            if (item.inputState) {
              numSd.push(item.inputState)
            }
          })
          this.rightGoCount = numSd.length
          break
        case 'empty':// 清空
          this.searchDatas = []
          break
        case 'clearAll':// 全部清除
          this.changeActive = []
          break
        case 'clearUnselected':// 清除未选项
          this.changeActive = this.changeActive.filter((item, index) => {
            return item.inputState
          })
          break
        case 'oneClick'://单点
          let computedKjs = 100
          if (this.changeActive.length > 0) {
            computedKjs = computedKjs - this.changeActive.filter((item, index) => {
              return item.inputState === true
            }).length
          }
          console.log(computedKjs, statefr, 'computedKjs')
          if (statefr === 'left') {
            this.searchDatas.forEach((item, index) => {
              /* eslint-disable */
              if (index === ind && this.changeActive.find((list, key) => { return list.nameText === item.nameText }) === undefined) {
                computedKjs !== 0 ? this.changeActive.push(item) : (item.inputState = false, this.$refs['input' + ind][0].checked = false)
              }
            })
          }
          if (statefr === 'right') {
            this.changeActive.forEach((item, index) => {
              /* eslint-disable */
              if (index === ind) {
                item.inputState = false
                this.$refs['input' + ind][1].checked = false
              }
            })
          }
          break
      }
    },
    // 获取左侧菜单数据
    getCateData() {
      this.$axios({
        method: 'GET',
        url: 'data/data/list',
        params: {
          type: this.$route.query.type === 'area' ? 2 : 1,
          f: this.$store.state.selectDataLeft.f
        }
      }).then(res => {
        console.log(res, '左侧菜单')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.leftCateData = res.data.data.list
          this.selectClassId = this.$store.state.selectDataLeft.id
          console.log(this.selectClassId, 'this.selectClassId000')
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 高级查询指标数据
    searchDatasf() {
      this.$axios({
        method: 'GET',
        url: 'data/data/quota',
        params: {
          id: this.selectClassId  //分类id
        }
      }).then(res => {
        console.log(res, '高级查询指标数据')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.searchDatas = res.data.data.list.map((item, index) => {
            return {
              // input选中状态
              inputState: false,
              // 指标解释显示状态
              zbjsState: false,
              // 指标名称
              nameText: item.name,
              id: item.id,
              name: item.name
            }
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
    },
    // 按照指标名称从已有的指标集中查询
    searchArealy() {
      // if (this.labelNameSDFD !== '') {
      this.$axios({
        method: 'GET',
        url: 'data/data/search',
        params: {
          id: this.selectClassId,  //分类id
          key: this.labelNameSDFD //搜索关键词
        }
      }).then(res => {
        console.log(res, '查询指标数据')
        // 请求接口完成   请求成功
        if (res.data.code === 200) {
          this.searchDatas = res.data.data.list.map((item, index) => {
            return {
              // input选中状态
              inputState: false,
              // 指标解释显示状态
              zbjsState: false,
              // 指标名称
              nameText: item.name,
              id: item.id,
              classify_id: item.classify_id,
              desc: item.desc,
              name: item.name
            }
          })
        }
      }).catch((fail) => {
        console.log(fail)
      })
      // } else {
      //   alert('查询的指标名称不能为空！')
      // }

    },
    // 点击查询数据代参数跳到简单查询，高级查询数据
    valueSearches() {
      this.$store.state.advanceData = this.changeActive.filter((item, index) => {
        return item.inputState === true
      })
    },
    // 指标解释
    explainSd(expl) {
      this.$store.state.labelExplainData = expl
      this.$store.state.labelExplainState = true
    }
  },
  computed: {
    /**
     * @desc 计算指标的个数
     * */
    changeActiveDataS() {
      let dataSLength = 0
      if (this.changeActive.length !== 0) {
        console.log(this.changeActive, 'this.changeActive')
        dataSLength = this.changeActive.filter((item, index) => {
          return item.inputState === true
        }).length
      }
      return dataSLength
    }
  },
  mounted() {
    this.getCateData()
    // this.defaultOpenDataCode = this.$store.state.openOpenLeft
  }
}
</script>
<style lang="scss" scoped>
/deep/ .el-col-24 {
  min-width: 100%;
  width: auto;
}
/deep/ .el-menu {
  border: none;
}
/deep/ .el-submenu__title {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  flex-flow: row-reverse;
  // border: 1px solid red;
  padding: 0;
}
/deep/ .el-submenu__icon-arrow {
  position: static;
  margin-top: 0.25rem;
  margin-right: 0.42rem;
  // left: 0;
  // right: auto;
}
.advancedQuery {
  margin-top: 1.25rem;
  width: 100%;
  height: 50rem;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  // border: 1px solid red;
  .leftNavS {
    width: 100%;
    height: 50rem;
    background-color: #fff;
    & > .title {
      width: 100%;
      height: 4.875rem;
      font-size: 1.25rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0.0625rem;
      color: #000000;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-bottom: 0.125rem solid #dbdbdb;
    }
  }
  .centerNavs {
    width: 100%;
    height: 50rem;
    background-color: #fff;
    border-left: 0.0625rem solid #dbdbdb;
    & > .title {
      width: 100%;
      height: 4.875rem;
      font-size: 1.25rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0.0625rem;
      color: #000000;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      border-bottom: 0.125rem solid #dbdbdb;
      & > input {
        margin-left: 1.25rem;
      }
      & > input:hover {
        cursor: pointer;
      }
      & > input:nth-child(1) {
        width: 15.625rem;
        height: 3rem;
        border-radius: 0.3125rem;
        border: solid 0.125rem #dbdbdb;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #999999;
      }
      & > div:nth-child(2) {
        margin-left: 0.9375rem;
        width: 4.75rem;
        height: 3rem;
        background-color: #52b6e3;
        border-radius: 0.3125rem;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 1.25rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #ffffff;
      }
      & > div:nth-child(2):hover {
        cursor: pointer;
      }
      & > span {
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #666666;
      }
    }
    & > .titleContSelect {
      width: 100%;
      height: 4.6rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > span {
        margin-left: 1.875rem;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #52b6e3;
        border-bottom: 0.0625rem solid #52b6e3;
      }
      & > span:hover {
        cursor: pointer;
      }
      & > font {
        margin-left: 4.875rem;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #f34f1e;
      }
    }
    & > .centerContent {
      width: 100%;
      height: 40.125rem;
      & > div {
        width: 100%;
        height: 2.5rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap; /*一行显示*/
        & > img {
          margin: 0 0.375rem;
          width: 1.4755rem;
          height: 1.4725rem;
        }
        & > input {
          margin-left: 1.125rem;
        }
        & > span {
          padding-right: 1.25rem;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #333333;
        }
      }
    }
  }
  .rightNavs {
    width: 100%;
    height: 50rem;
    background-color: #fff;
    border-left: 0.0625rem solid #dbdbdb;
    & > .title {
      width: 100%;
      height: 4.875rem;
      font-size: 1.25rem;
      font-weight: bold;
      font-stretch: normal;
      letter-spacing: 0.0625rem;
      color: #000000;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      border-bottom: 0.125rem solid #dbdbdb;
    }
    & > .titleContSelect {
      width: 100%;
      height: 4.6rem;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      & > span {
        margin-left: 1.875rem;
        font-size: 1.125rem;
        font-weight: normal;
        font-stretch: normal;
        letter-spacing: 0rem;
        color: #52b6e3;
        border-bottom: 0.0625rem solid #52b6e3;
      }
      & > span:hover {
        cursor: pointer;
      }
    }
    & > .centerContent {
      width: 100%;
      height: 40.125rem;
      & > div {
        width: 100%;
        height: 2.5rem;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        white-space: nowrap; /*一行显示*/
        & > img {
          margin: 0 0.375rem;
          width: 1.4755rem;
          height: 1.4725rem;
        }
        & > input {
          margin-left: 1.125rem;
        }
        & > span {
          padding-right: 1.25rem;
          font-size: 1.25rem;
          font-weight: normal;
          font-stretch: normal;
          letter-spacing: 0rem;
          color: #333333;
        }
      }
    }
  }
}
</style>
